<template>
    <div>
        <Modal v-model="modal.add" title="添加" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('addForm', $event)" width="1020">
            <Form ref="addForm" :model="form" :label-width="120" :rules="validateRules">
                <Row>
	<i-col span="12">
	<FormItem label="公告标题" prop="title">
	<Input v-model="form.title" placeholder="请输入公告标题" clearable/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="封面图片" prop="coverImg">
	<!-- <Input v-model="form.coverImg" placeholder="请输入封面图片" clearable/> -->
          <div class="demo-upload-list" v-if="form.url">
            <img :src="form.url" />
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(form.url)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
            </div>
          </div>
          <Upload
            ref="upload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="20480"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :on-progress="handleProgress"
            multiple
            type="drag"
            :action="urls.uploadImgUrl"
						:headers="uploadHeader"
            style="display: inline-block;width:58px;"
          >
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="公告摘要" prop="summary">
	<Input v-model="form.summary" placeholder="请输入公告摘要" clearable/>
</FormItem>
	</i-col>
<i-col span="24">
	<FormItem label="公告内容" prop="content">
	<editor ref="editorAdd" :value="form.content" @on-change="handleChange" />
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="截止时间" prop="endTime">
	<DatePicker @on-change="form.endTime=$event" :value="form.endTime" placeholder="请输入截止时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="置顶状态" prop="stickStatus">
	<InputNumber v-model="form.stickStatus" placeholder="请输入置顶状态" style="width: 100%;"/>
</FormItem>
	</i-col>
  <i-col span="12">
	<FormItem label="公告类型" prop="noticeType">
	<InputNumber v-model="form.noticeType" placeholder="请输入公告类型" style="width: 100%;"/>
</FormItem>
	</i-col>
</Row>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="resetFormCancelModal('addForm', 'add')">取消</Button>
                <Button type="primary" size="large" @click="add" :loading="loading.add">添加</Button>
            </div>
        </Modal>
        <Modal v-model="modal.edit" title="修改" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('editForm', $event)" width="1020">
            <Form ref="editForm" :model="form" :label-width="120" :rules="validateRules">
                <Row>
	<i-col span="12">
	<FormItem label="公告标题" prop="title">
	<Input v-model="form.title" placeholder="请输入公告标题" clearable/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="封面图片" prop="coverImg">
	<!-- <Input v-model="form.coverImg" placeholder="请输入封面图片" clearable/> -->
          <div class="demo-upload-list" v-if="form.url">
            <img :src="form.url" />
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(form.url)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
            </div>
          </div>
          <Upload
            ref="upload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="20480"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :on-progress="handleProgress"
            multiple
            type="drag"
            :action="urls.uploadImgUrl"
						:headers="uploadHeader"
            style="display: inline-block;width:58px;"
          >
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="公告摘要" prop="summary">
	<Input v-model="form.summary" placeholder="请输入公告摘要" clearable/>
</FormItem>
	</i-col>

    <i-col span="24">
	<FormItem label="公告内容" prop="content">
    <editor ref="editorEdit" :value="form.content" @on-change="handleChange" />
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="截止时间" prop="endTime">
	<DatePicker @on-change="form.endTime=$event" :value="form.endTime" placeholder="请输入截止时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="置顶状态" prop="stickStatus">
	<InputNumber v-model="form.stickStatus" placeholder="请输入置顶状态" style="width: 100%;"/>
</FormItem>
	</i-col>
  <i-col span="12">
	<FormItem label="公告类型" prop="noticeType">
	<InputNumber v-model="form.noticeType" placeholder="请输入公告类型" style="width: 100%;"/>
</FormItem>
	</i-col>
</Row>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="resetFormCancelModal('editForm', 'edit')">取消</Button>
                <Button type="primary" size="large" @click="edit" :loading="loading.edit">修改</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import Editor from '_c/editor'
    import { getLocalStorageToken, localStorage } from '@/libs/util'
    import * as ResponseStatus from '@/api/response-status'
    import config from '@/config'
    const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
    const cdnUrl = config.baseUrl.cdnUrl
    export default {
        name: 'NoticeAddEdit',
        components: {
            Editor
        },
        data() {
            return {
                modal: {
                    add: false,
                    edit: false
                },
                loading: {
                    add: false,
                    edit: false
                },
                urls: {
                    addUrl: '/notice/admin/save',
                    batchAddUrl: '/notice/admin/batch-save',
                    editUrl: '/notice/admin/update',
                    batchEditUrl: '/notice/admin/batch-update',
                    uploadImgUrl: baseUrl + '/notice/admin/upload-img',
                },
                form: {
                    title: null,
coverImg: null,
url: null,
summary: null,
content: null,
endTime: null,
stickStatus: null,
noticeType: null,
                },
                validateRules: {
                    title: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 50, message: '必须1-50个字符', trigger: 'blur'}
],
coverImg: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 500, message: '必须1-500个字符', trigger: 'blur'}
],
summary: [
{type: 'string', min: 1, max: 255, message: '必须1-255个字符', trigger: 'blur'}
],
content: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 65535, message: '必须1-65535个字符', trigger: 'blur'}
],

                },
                uploadHeader: {
                  Authorization: 'Bearer ' + getLocalStorageToken()
                },
                imgUrl: '',
                visible: false
            }
        },
        computed: {},
        mounted() {
            
        },
        methods: {
            changeModalVisibleResetForm(formRef, visible) {
                if (!visible) {
					        this.$refs[formRef].resetFields()
					        this.form.id = null
                }
            },
            resetFormCancelModal(formRef, modal) {
                this.modal[modal] = false
				        this.$refs[formRef].resetFields()
				        this.form.id = null
            },
            add() {
                this.$emit('add')
            },
            edit() {
                this.$emit('edit')
            },
            handleChange (html, text) {
                this.form.content = html
            },
            /**
             * 查看图片
             */
            handleView(url) {
              this.imgUrl = url
              this.visible = true
            },
            /**
             * 移除图片
             */
            handleRemove() {
              this.form.url = ''
              this.form.coverImg = ''
            },
            handleSuccess(res, file) {
              if (res.code === ResponseStatus.OK) {
                this.$Notice.success({
                  title: '上传成功',
                  desc: file.name + ' 上传成功'
                })
                this.form.coverImg = res.data
                this.form.url = cdnUrl + "/" + res.data
              } else {
                this.$Notice.error({
                  title: '上传失败',
                  desc: res.message
                })
              }
            },
            handleFormatError(file) {
              this.$Notice.warning({
                title: '文件格式不正确',
                desc: file.name + ' 文件格式不正确，请选择JPG或PNG。'
              })
            },
            handleMaxSize(file) {
              this.$Notice.warning({
                title: '超出文件大小限制',
                desc: file.name + ' 太大，不得超过2M.'
              })
            },
            handleProgress(event, file) {
              this.$Notice.info({
                title: '文件正在上传',
                desc: file.name + ' 上传中...'
              })
            }
        }
    }
</script>

<style>
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
